import { Directive,Input,ElementRef,HostListener } from '@angular/core';

@Directive({
  selector: '[appHightlight]'
})
export class HightlightDirective {
  @Input() defaultColor:string;
  @Input() appHightlight:string;
  @HostListener('mouseenter') in(){
    this.setColor(this.appHightlight || this.defaultColor)
  }
  @HostListener('mouseleave') out(){
    this.el.nativeElement.style.backgroundColor = null;
  }
  constructor(public el:ElementRef) {
    //this.setColor();
   }
   setColor(color){
     //console.log(this.appHightlight)
     this.el.nativeElement.style.backgroundColor  = color;
   }

}
